<template>
  <div class='home-category'>
    <ul class="menu">
      <li v-for="item in menuList" :key="item.id">
        <!-- 一级类目 -->
        <RouterLink :to="`/category/${item.id}`">{{item.name}}</RouterLink>
        <!-- 二级类目当children有值时才去遍历 -->
        <template v-if="item.children">
          <RouterLink v-for="sub in item.children" :key="sub.id" :to="`/category/${item.id}`">{{sub.name}}</RouterLink>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import { computed,reactive } from "vue"
import { useStore } from "vuex"
export default {
  name: 'HomeCategory',
  setup(){
    const store = useStore()
    // 最终使用的数据=9个分类+一个品牌
    const brand=reactive({
      id:"brand",
      name:"品牌",
      children:[{id:"brand-children", name:"品牌推荐"}]
    })
    const menuList=computed(()=>{
      const list=store.state.category.list.map(item=>{
        // 得到九个分类，且每个一级分类下的子分类只有两个
        return{
          id:item.id,
          name:item.name,
          children:item.children && item.children.slice(0,2),
          goods:item.goods
        }
      })
      list.push(brand)
      return list
    })
    return {menuList}
  }
}
</script>

<style scoped lang='less'>
.home-category {
  width: 250px;
  height: 500px;
  background: rgba(0,0,0,0.8);
  position: relative;
  z-index: 99;
  .menu {
    li {
      padding-left: 40px;
      height: 50px;
      line-height: 50px;
      &:hover {
        background: @xtxColor;
      }
      a {
        margin-right: 4px;
        color: #fff;
        &:first-child {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
